;
(function() {
    var cityData = '全选';
    var sexData = 2;
    var ageData = 100;
   // var moveData= "跑步距离"
    //筛选条件事件
    $("div[role=sex]").click(function(){
        sexData = getOperName.call(this);

    });
    $("div[role=city]").click(function() {
        var store = $(this);
        $(this).parent().parent().parent().find("div").each(function(index, element) {
            $(element).find("div").attr("style", "COLOR: rgb(255,255,255);");
        });
        $(this).find('div').attr("style", "COLOR: rgb(255,232,0);");
        cityData = $(this).find('div').attr('geoid');
    });
   
    $("div[role=age]").click(function() {
        ageData = getOperName.call(this);
    });
    $("div[role=move]").click(function() {
        //moveData = getOperName.call(this);
    });
    $('#showSearch').click(function() {
	loadData(sexData,ageData,cityData)
        console.log(cityData + "  " +" "+ sexData + " " + ageData)
    });

    function getOperName() {
        var store = $(this);
        $(this).parent().parent().parent().find("div").each(function(index, element) {
            $(element).find("span").attr("style", "COLOR: rgb(255,255,255);");
        });
        $(this).find('span').attr("style", "COLOR: rgb(255,232,0);");
        var oper = $(this).find('span');
        var operid = oper.attr('doperid') || oper.attr('soperid');
        return operid;
    }


loadData(sexData,ageData,cityData)
function loadData(sexData,ageData,cityData){
	$.getJSON('http://192.168.100.52:8020/jsonParse/'+sexData+'/'+ageData+'/'+cityData).done(function(msg){
	var data={};
	for(var i in msg){
		var arr=msg[i];
		data[i]={};
		data[i]["avgcalories"]=[];
		data[i]["avgrundist"]=[];
		data[i]["avgstep"]=[];
		data[i]["avgdistance"]=[];
		for(var j=0;j<arr.length;j++){
			data[i]["avgcalories"].push({"prov":arr[j]["city"],"value":[arr[j]["lon"],arr[j]["lat"],arr[j]["avgcalories"]]});
			data[i]["avgrundist"].push({"prov":arr[j]["city"],"value":[arr[j]["lon"],arr[j]["lat"],arr[j]["avgrundist"]]});
			data[i]["avgstep"].push({"prov":arr[j]["city"],"value":[arr[j]["lon"],arr[j]["lat"],arr[j]["avgstep"]]});
			data[i]["avgdistance"].push({"prov":arr[j]["city"],"value":[arr[j]["lon"],arr[j]["lat"],arr[j]["avgdistance"]]});
		}
	}
	
	var options=[];
	for(var i in data){
		options.push({series:[{data:data[i]["avgcalories"]},{data:data[i]["avgrundist"]},{data:data[i]["avgstep"]},{data:data[i]["avgdistance"]}]})
	}
	console.log(options)
	chinaMap(options)
})
}



    //地图
    function chinaMap(options){
   var myChart = echarts.init(document.getElementById("main")); 
       myChart.showLoading();

    myChart.hideLoading();

    option = {
    	baseOption:{
    		timeline:{
                axisType:'time',
                autoPlay:true,
                loop:true,
                playInterval:5000,
                data:['20160822', '20160823', '20160824', '20160825', '20160826', '20160827', '20160828'],
                label:{
                	normal:{
                		textStyle:{
                			color:"#fff"
                		}
                	},
                    formatter:function(s){
                        return s
                    }
                }
    		},
	    	title : {
	            text: '',
	            left: 'center',
	            top: 'top',
	            textStyle: {
	                color: '#fff'
	            }
	        },
	        tooltip: {
	        	formatter:function(a){
	        		return a.seriesName+"</br>"+a.data.prov+"</br>"+a.data.value[2]
	        	}
	        },
	        legend: {
	            left: 'left',
	            data: ['消耗的卡路里', '跑步距离', '步数','走路距离'],
	            selectedMode:"single",
	        	selected:{
	        		"消耗的卡路里":true,
	        		"跑步距离":false,
	        		"步数":false,
	        		"走路距离":false
	        	},
	            textStyle: {
	                color: '#ccc'
	            }
	        },
	        geo: {
	            name: '',
	            type: 'scatter',
	            map: 'china',
	            label: {
	                emphasis: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                normal: {
	                    borderColor: '1b2e75',
	                    areaColor: '#1b2e75'
	                },
	                emphasis: {
	                    areaColor: '#1b2e75'
	                }
	            }
	        },
	        series: [{
            name: '消耗的卡路里',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            symbolSize: function(val) {
                return val[2] / 50;
            },
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(37, 140, 249, 0.8)',
                    color: 'rgba(37, 140, 249, 0.8)'
                }
            }
        }, {
            name: '跑步距离',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            symbolSize: function(val) {
                return val[2] / 100;
            },
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(14, 241, 242, 0.8)',
                    color: 'rgba(14, 241, 242, 0.8)'
                }
            }
        }, {
            name: '步数',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            symbolSize: function(val) {
                return val[2] / 1000;
            },
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(255, 255, 255, 0.8)',
                    color: 'rgba(255, 255, 0, 0.8)'
                }
            }
        },{
            name: '走路距离',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            symbolSize: function(val) {
                return val[2] / 1000;
            },
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(255, 255, 255, 0.8)',
                    color: 'rgba(255, 0, 255, 0.8)'
                }
            }
        
        }]
    	},
        options:options
        /*[
        {series:[
        	{data:data.MonData},
        	{data:data.TueData},
        	{data:data.WedData}
        ]}
        ]*/
        
    }

	myChart.setOption(option)

   

    }


//右边的柱状图
//上面

 $.get("json/BMI.json").done(function(data){
	var time=[];
	var man={};
	var woman={};
	var prov=[];
	for(var i=0;i<data.length;i++){
		var obj=data[i];
		for(var k in obj){
			if(k=="agegroup"&&time.indexOf(obj["agegroup"])==-1){
				time.push(obj["agegroup"])
			}
		}	
	};
	for(var i=0;i<time.length;i++){
		man[time[i]]=[];
		woman[time[i]]=[];
	};
	for(var i=0;i<data.length;i++){
		var obj=data[i];
		for(var t=0;t<time.length;t++){
			if(obj["gender"]==1&&obj["agegroup"]==time[t]){
				man[time[t]].push({"prov":obj["prov"],"gender":obj["gender"],"agegroup":obj["agegroup"],"weight":obj["weight"],"height":obj["height"],"bmi":obj["bmi"]})
				
			}
			if(obj["gender"]==0&&obj["agegroup"]==time[t]){
				woman[time[t]].push({"prov":obj["prov"],"gender":obj["gender"],"agegroup":obj["agegroup"],"weight":obj["weight"],"height":obj["height"],"bmi":obj["bmi"]})
			}
			if(prov.indexOf(obj["prov"])==-1){
				prov.push(obj["prov"])
			}
		}
	}
	
	var weight={};
	for(var i in man){
		var obj=man[i];
		weight[i]=[];
		for(var k=0;k<obj.length;k++){
			weight[i].push({"weight":obj[k]["weight"],"height":obj[k]["height"],"BMI":obj[k]["bmi"],});
		}
	};
	
	var options=[];
	for(var i in weight){
		var obj=weight[i];
		var a=[];
		var b=[];
		var c=[];
		for(var j=0;j<obj.length;j++){
			a.push(weight[i][j]["weight"]);
			b.push(weight[i][j]["height"]);
			c.push(weight[i][j]["BMI"]);
			
		}
		options.push({series:[{data:a},{data:b},{data:c}]})	
	};
	$(".woman").click(function(){
		$(this).addClass("active");
		$(".man").removeClass("active");
		var weight={};
		for(var i in woman){
			var obj=woman[i];
			weight[i]=[];
			for(var k=0;k<obj.length;k++){
				weight[i].push({"weight":obj[k]["weight"],"height":obj[k]["height"],"BMI":obj[k]["bmi"],});
			}
		};
		
		var options=[];
		for(var i in weight){
			var obj=weight[i];
			var a=[];
			var b=[];
			var c=[];
			for(var j=0;j<obj.length;j++){
				a.push(weight[i][j]["weight"]);
				b.push(weight[i][j]["height"]);
				c.push(weight[i][j]["BMI"]);
				
			}
		options.push({series:[{data:a},{data:b},{data:c}]})	
	};
		
		TopBar(time,prov,options);
	})
	$(".man").click(function(){
		$(this).addClass("active");
		$(".woman").removeClass("active");
		var weight={};
		for(var i in man){
			var obj=man[i];
			weight[i]=[];
			for(var k=0;k<obj.length;k++){
				weight[i].push({"weight":obj[k]["weight"],"height":obj[k]["height"],"BMI":obj[k]["bmi"],});
			}
		};
		
		var options=[];
		for(var i in weight){
			var obj=weight[i];
			var a=[];
			var b=[];
			var c=[];
			for(var j=0;j<obj.length;j++){
				a.push(weight[i][j]["weight"]);
				b.push(weight[i][j]["height"]);
				c.push(weight[i][j]["BMI"]);
				
			}
		options.push({series:[{data:a},{data:b},{data:c}]})	
	};
		
		TopBar(time,prov,options);
	})
	TopBar(time,prov,options);
})
function TopBar(time,prov,options){
	 var myChart = echarts.init(document.getElementById("bar2_main")); 
	
	option = {
           baseOption:{
            timeline:{
                axisType:'time',
                autoPlay:true,
                loop:true,
                playInterval:5000,
                data:time,
                label:{
                    formatter:function(s){
                        return s
                    }
                }
            },
        backgroundColor: '../images/S8-bg.png',
        title: {
            text: '全国各省市60岁年龄段',
            subtext:'数据来华米',
            x: 'left',
            textStyle: {
                color: '#fff'
            }
        },
        color: ['#E44E67','#53C2F9','#F7B449'],
        legend:{
        	right:0,
        	data:['体重','身高','BMI'],
        	selectedMode:"single",
        	selected:{
        		"体重":true,
        		"身高":false,
        		"BMI":false
        	},
        	textStyle:{
        		color:'#fff'
        	}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            borderWidth: 0,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: prov,
            axisLabel:{
             	interval:0,
             	rotate:60
             },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: true,
                alignWithLabel: true
            }
        }],
        yAxis: [{
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            }
        }],
        series: [{
            name: '体重',
            type: 'bar',
            data: []
        },
        {
            name: '身高',
            type: 'bar',
            data: []
        },
        {
            name: 'BMI',
            type: 'bar',
            data: []
        }
        ]
           },
           options:options
        };
    myChart.setOption(option)
		

}

//下面

$.get("json/active.json").done(function(data){
	var time=[];
	var xAxis=[];
	var options=[];
	for(var i=0;i<data.length;i++){
		var obj=data[i];
		for(var k in obj){
			var value=obj[k];
			var datas=[];
			time.push(k);
			for(var j in value){
				if(xAxis.indexOf(j)==-1){
				xAxis.push(j)
				};
				datas.push(value[j]*100)
			};
			options.push({"series":[{"data":datas}]})
		}
	};
	BottomBar(time,xAxis,options);
})
function BottomBar(time,xAis,options){
	var myChart = echarts.init(document.getElementById("bar1_main")); 
	option = {
           baseOption:{
            timeline:{
                axisType:'time',
                autoPlay:true,
                loop:true,
                playInterval:2000,
                data:time,
                label:{
                    formatter:function(s){
                        return "0"+s
                    }
                }
            },
        backgroundColor: '../images/S8-bg.png',
        title: {
            text: '各省活跃度',
            x: 'left',
            textStyle: {
                color: '#fff'
            }
        },
        color: ['#12A7AE'],
        legend:{
        	right:0,
        	data:['活跃值'],
        	textStyle:{
        		color:'#fff'
        	}
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            borderWidth: 0,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data:xAis,
             axisLabel:{
             	interval:0,
             	rotate:60
             },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: true,
                alignWithLabel: true
            }
        }],
        yAxis: [{
            type: 'value',
            axisLabel:{
            	formatter:function(value){
            		return value+"%"
            	}
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            }
        }],
        series: [{
            name: '活跃值',
            type: 'bar',
            data: []
        }
        ]
           },
           options:options
        };
	
	myChart.setOption(option)
}
 


})()